<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="院校" prop="school" />
    <el-table-column label="专业" prop="majar" />
    <el-table-column label="入学时间" prop="time" />
    <el-table-column align="right">
    <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import axios from 'axios'

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
//table数据
// filterTableData = ref
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
  //确认删除?
  ElMessageBox.confirm(
    '是否确定要删除该条信息?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

const tableData = [
   {
    name: 'Tom',
    sex:'男',
    school:'武汉大学'
  },
]
</script>

<style lang="less" scoped>

</style>
